<template>
    <div class="delete">
        <div style="display: flex; margin-top: 20px; height: 100px;">
      <!-- <transition name="zoom"> -->
        <div v-show="true" class="el-zoom-in-top">
            <p class="delete_notice">确定删除吗？</p>
            <div class="delete_buttons">
            <el-button size="mini" type="text" @click="delete_cancel">取消</el-button>
            &nbsp;
            <el-button type="primary" size="mini" @click="delete_mine">确定</el-button>
            </div>          
        </div>
      <!-- </transition> -->
    </div>
    </div>
</template>
<script>
export default{
    data(){
        return {
            D_delete_cancel:1,
            D_delete:1
        }
    },
    props:{
        todelete:{
            type: Function
        }
    },
    methods:{
        // 向book——message传递数据
        delete_cancel(){
            // console.log("123");
            this.$bus.$emit('bus_delete_cancel', this.D_delete_cancel);
            console.log(this.D_delete);
        },
        delete_mine(){
            // console.log("123");
            this.$bus.$emit('bus_delete', this.D_delete);
            
            this.todelete()
        }
    }
}
</script>
<style lang="less" scoped>
.delete{
    position: absolute;
    width: 200px;
    height: 150px;
    border-color: rgba(79, 78, 76,0.3);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(247, 248, 243,0.95);
   
    left: 50%;
    top: 50%;
    border-radius: 15px;
    transform: translate(-50%,-50%);
    border-style:solid;
    border-width: 0.1px;
    .delete_notice{
        position: absolute;
        left: 45px;
        top: 35px;
        font-size: 20px;
    }

    .delete_buttons{
        position: absolute;
        bottom: 20px;
        left: 50px;
    }
    .zoom-enter-active{
        transition: all .3s ease;
    }
    .zoom-leave-active{
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0) ;
    }
    .zoom-enter, .l-zoom-leave-to{
        // transition: all .3s ease;
        transform: rotateX('10px');
    }
}
</style>

